<template>
    <!-- 内容区 -->
    <div class="contentContainer">
        <el-button
            type="primary"
            style="margin-bottom: 10px;"
            @click="addCategory"
        >
            新增
        </el-button>
        <el-table :data="tableData" style="width: 100%;">
            <el-table-column 
                prop="id"
                label="ID"
                width="80"
            />
            <el-table-column 
                prop="name"
                label="类别名称"
                width="180"
            />
            <el-table-column 
                prop="description"
                label="描述"
                width="240"
            />
            <el-table-column 
                prop="created_at"
                label="创建时间"
                width="280"
            />
            <el-table-column 
                prop="sort"
                label="排序权重"
                width="180"
            />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button 
                        type="primary"
                        @click="updateCategory(scope.row)"
                    >
                        编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 编辑面板 -->
    <el-dialog
        v-model="dialogVisible"
        :title="mode === 0 ? '新建类别' : '修改类别'"
        width="30%"
    >
        <div 
            v-show="mode === 1"
            style="font-size: 18px; margin-bottom: 10px;"
        >
            <span style="width: 45px; display: inline-block;">
                id:
            </span>
            <el-input 
                v-model="currentSelectedCategory.id"
                style="width: 300px; margin-left: 10px;"
                disabled
            />
        </div>
        <div style="font-size: 18px; margin-bottom: 10px;">
            <span style="width: 45px; display: inline-block;">
                名称:
            </span>
            <el-input 
                v-model="currentSelectedCategory.name"
                style="width: 300px; margin-left: 10px;"
            />
        </div>
        <div style="font-size: 18px; margin-bottom: 10px;">
            <span style="width: 45px; display: inline-block;">
                描述:
            </span>
            <el-input 
                v-model="currentSelectedCategory.description"
                style="width: 300px; margin-left: 10px;"
            />
        </div>
        <div style="font-size: 18px; margin-bottom: 10px;">
            <span style="width: 45px; display: inline-block;">
                排序:
            </span>
            <el-select
                v-model="currentSelectedCategory.sort"
                style="width: 300px; margin-left: 10px;"
                placeholder="选择权重"
            >
                <el-option 
                    v-for="it in sortMenu"
                    :label="it"
                    :value="it"
                    :index="it"
                />
            </el-select>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">
                    取消
                </el-button>
                <el-button
                    type="primary"
                    @click="confirmAction"
                >
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { RequestPath, startRequest } from '../base/RequestWork';
import { ElMessage } from 'element-plus';

// 列表绑定的类别数据
const tableData = ref();
// 控制编辑面板是否可见
const dialogVisible = ref(false);
// 当前编辑的类别数据
const currentSelectedCategory = ref();
// 所提供选择的排序权重
const sortMenu = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
// 当前类别编辑对话框的模式：0为新建，1为编辑
const mode = ref(0);
// 组件挂载时的生命周期函数，进行数据加载
onMounted(() => {
    reloadData();
});
// 加载数据的方法
const reloadData = () => {
    // 请求所有类别数据
    startRequest(RequestPath.goodsCategoryGet, 'get', {}).then((response) => {
        const data = response.data;
        tableData.value = data.datas ?? [];
    }).catch((error) => {
        ElMessage.error({
            message: error.response.data.error
        });
    });
}
// 新增类别
const addCategory = () => {
    mode.value = 0;
    dialogVisible.value = true;
    currentSelectedCategory.value = {};
}
// 更新类别信息
const updateCategory = (ca: any) => {
    mode.value = 1;
    dialogVisible.value = true;
    currentSelectedCategory.value = { ...ca };
}
// 编辑面板上的确认按钮被点击时要执行的方法
const confirmAction = () => {
    if (!currentSelectedCategory.value.name || !currentSelectedCategory.value.description) {
        ElMessage.error({
            message: '请完善参数'
        });
        return;
    }
    if (mode.value === 0) {
        // 新增
        startRequest(RequestPath.goodsCategoryAdd, 'post', currentSelectedCategory.value).then(() => {
            dialogVisible.value = false;
            // 刷新页面
            reloadData();
        }).catch((error) => {
            ElMessage.error({
                message: error.response.data.error
            });
        });
    } else {
        // 更新
        startRequest(RequestPath.goodsCategoryUpdate, 'post', currentSelectedCategory.value).then(() => {
            dialogVisible.value = false;
            // 刷新页面
            reloadData();
        }).catch((error) => {
            ElMessage.error({
                message: error.response.data.error
            });
        });
    }
}
</script>
<style scoped>
</style>